<script setup lang="ts">
import {ref} from "vue";

let msg = ref<string>('吃好喝好，心态超好~')
// let timer = ref<number>()
let timer: number;
let isDisabled = ref<boolean>(false)
// let isDisabled: boolean = false

// 开始
function start() {
  // console.log(msg.value)
  // console.log(msg.value.substring(0, 1))
  // console.log(msg.value.substring(1))
  isDisabled.value = !isDisabled.value
  timer= setInterval(() => {
    msg.value = msg.value.substring(1) + msg.value.substring(0, 1)
  }, 300)
}

// 暂停
let paused = function () {
  isDisabled.value = !isDisabled.value
//   清除定时器
  clearInterval(timer)
}
</script>

<template>
  <button @click="start" :disabled="isDisabled">开始</button>
  <button @click="paused" :disabled="!isDisabled">暂停</button>
  <div>{{ msg }}</div>
</template>

<style scoped>

</style>
